<div class="wrapper">
  <header v-if="!isIframe" class="main-header">
    <!-- Logo -->
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- Toggle button on navbar only for mobile -->
          <a v-if="isMobile()" href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <i :class="g3wtemplate.getFontClass('bars')"></i>
          </a>
          <div class="logo-wrapper">
            <a v-if="logo_url" :href="logo_link" :target="logo_link_target" class="project_logo_link">
              <img :src="logo_url">
            </a>
            <div v-if="!isMobile()" class="project_title_content">
              <div class="main_title">{{ main_title }}</div>
              <div class="sub_title">{{project_title}}</div>
            </div>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="main-navbar">
          <navbarleftitems></navbarleftitems>
          <navbarrightitems></navbarrightitems>
          <ul class="nav navbar-nav navbar-right app-navbar-nav">
            <header-item :state="state" @show-custom-modal-content="showCustomModalContent" v-for="state in custom_header_items_position[0]" :key="state.id"></header-item>
            <li id="changemaps" class="dropdown user" v-if="numberOfProjectsInGroup > 1">
              <a href="#" @click="openProjectsMenu" class="dropdown-toggle" data-toggle="dropdown">
                <i :class="g3wtemplate.getFontClass('change-map')" aria-hidden="true"></i>
                <span v-t="'changemap'"></span>
              </a>
            </li>
            <header-item :state="state" @show-custom-modal-content="showCustomModalContent" v-for="state in custom_header_items_position[1]" :key="state.id"></header-item>
            <li v-if="user" class="dropdown user user-menu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <i :class="g3wtemplate.getFontClass('user')"></i>
                <span class="hidden-xs">{{ user.username }}</span>
              </a>
              <ul class="dropdown-menu">
                <li class="user-header">
                  <p>
                    {{ user.first_name }} {{ user.last_name }}
                  </p>
                </li>
                <li class="user-footer">
                  <div class="pull-left" v-if="user.admin_url">
                    <a :href="user.admin_url" class="btn btn-default btn-flat" ><i :class="g3wtemplate.getFontClass('folder')"></i> Admin</a>
                  </div>
                  <div class="pull-right">
                    <a :href="user.logout_url" class="btn btn-default btn-flat" v-t="'logout'"><i :class="g3wtemplate.getFontClass('sign-out')" style="margin-right: 2px;"></i></a>
                  </div>
                </li>
              </ul>
            </li>
            <header-item :state="state" @show-custom-modal-content="showCustomModalContent" v-for="state in custom_header_items_position[2]" :key="state.id"></header-item>
            <li class="dropdown user user-menu">
              <a href="#" data-toggle="modal" data-target="#credits" class="dropdown-toggle">
                <i :class="g3wtemplate.getFontClass('credits')" aria-hidden="true"></i>
                <span>Credits</span>
              </a>
            </li>
            <header-item :state="state" @show-custom-modal-content="showCustomModalContent" v-for="state in custom_header_items_position[3]" :key="state.id"></header-item>
            <li v-if="languages" style="margin-top: 9px; margin-left: 3px;">
              <select class="form-control skin-color" v-model="language" style="cursor:pointer">
                <option v-for="_language in languages" :key="_language[0]" :value="_language[0]" selected="_language[0] === language">{{_language[1]}}</option>
              </select>
            </li>
            <li v-if="frontendurl" class="dropdown">
              <a :href="frontendurl">
                <span><i :class="g3wtemplate.getFontClass('home')"></i> Home</span>
              </a>
            </li>
            <header-item :state="state" @show-custom-modal-content="showCustomModalContent" v-for="state in custom_header_items_position[4]" :key="state.id"></header-item>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <sidebar></sidebar>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" :style="{paddingTop: isIframe ? 0 : null}">
    <viewport :appState="appState"></viewport>
  </div>
  <!-- /.content-wrapper -->
  <!-- Control Sidebar -->
  <floatbar></floatbar>
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
  <!--full screen modal element-->
  <div class="modal fade modal-fullscreen force-fullscreen" id="full-screen-modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="full-screen-modal" aria-hidden="true"></div>
  <!---->
  <div id="credits" class="modal fade">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <div style="display: flex; flex-direction: column; justify-content: space-around; justify-items: center; align-items: center">
            <div class="customcredits" v-if="!!customcredits" v-html="customcredits"></div>
            <div v-if="powered_by">
              <div class="g3w-credits-block">
                <div v-t="'credits.g3wSuiteFramework'" class="credit-title-logo"></div>
                <a target="_blank" href="https://g3wsuite.gis3w.it/">
                  <img class="g3w-suite-logo" :src="g3w_suite_logo" alt="">
                </a>
                <div v-t="'credits.g3wSuiteDescription'" style="margin-top: 10px;"></div>
              </div>
              <div v-t="'credits.productOf'" class="credit-title-logo g3w-credits-block"></div>
              <a style="text-align: center!important;" href="http://www.gis3w.it" target="_blank">
                <img :src="credits_logo" class="img-responsive center-block" alt="">
              </a>
              <address id="address-credits" style="line-height: 1.5; text-align: center; margin-top: 20px;">
                <i :class="g3wtemplate.getFontClass('marker')" aria-hidden="true"></i>
                <span> Montecatini Terme - Italy</span></br>
                <i :class="g3wtemplate.getFontClass('mobile')" aria-hidden="true"></i>
                <span>  +39 393 8534336</span></br>
                <i :class="g3wtemplate.getFontClass('mail')" aria-hidden="true"></i>
                <span><a href="mailto:info@gis3w.it" style="color:#000000"> info@gis3w.it</a></span>
              </address>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="custom_modal" class="modal fade">
    <div class="modal-dialog" role="document">
      <div class="modal-content" v-html="current_custom_modal_content"></div>
    </div>
  </div>
</div>
